
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name='viewport' content='width=device-width, initial-scale=1'>

    <style>
        p.roughness {
            color: #333333;
            font-size: 15px;
            font-weight: bold;
        }
        p.content {
            color: #666666;
            font-size: 14px;
            font-weight: normal;
        }
        p {
            line-height: 25px;
        }
        img {
            max-width:100% !important;
            height:auto!important;
        }
        table {
            border-color: #999999;
            border-collapse: collapse;
            table-layout: fixed;
        }
        tr {
            border:1px solid #DDDDDD;
            height: 30px;
        }
        th {
            background-color: #DDDDDD;
            font-size: 12px;
            min-width: 50px;
        }
        td {
            min-width: 50px;
            text-align: center;
            font-size: 13px;
            color: #6D6D6D;
        }
        div.tableDiv {
            max-width: 100% !important;
            height: auto !important;
            overflow: scroll;
        }
        div.bigDiv {
            display: flex;
        }

    </style>

    <script>

        function playVideo() {
            window.webkit.messageHandlers.playJiezhiVideo.postMessage( "https://taotuo.oss-cn-hangzhou.aliyuncs.com/TaoTuoApp/Video/Hand.mp4");
        }

    </script>

</head>
<body>

<p class="roughness">[一枚理想的戒指，除了款式精美，戒指圈度也要配合手指尺寸，才可以佩戴得舒适贴心。为了找出合适您的戒指尺寸，请根据以下的方法量度]</p>
<p class="roughness">测量必读</p>
<p class="content">1、最理想的戒指尺寸，应该是松紧有致，既不轻易划出指关节，也不会勒得过紧。<br>
    2、避免在寒冷情况下测量，测得的数据比通常小(早晨手指比较小，不宜)。<br>
    3、使用较细记号笔在对接点做记号为宜。<br>
    4、记录精确到毫米，建议测量3次以上，取平均值为宜</p>
<img src="jiezhi.png" onclick="playVideo()">
<p class="roughness">温馨提示：</p>
<p class="content">1、一般戒指戴于食指、中指或无名指，大部分女生佩戴的指号数为9-15号，其中11号、12号的较多<br>
    2、一般男生佩戴的号数为12-22号，其中15-20号的较多<br>
    3、测量结果通常如下尺寸表，如不在范围内，建议重新测量或者到饰品店测量（直径和周长以mm做单位）
</p>

<script>
    var data = [
        {
            "num": "1#",
            "diameter": "12.5",
            "perimeter": "39.1"
        },
        {
            "num": "2#",
            "diameter": "13.3",
            "perimeter": "41.7"
        },
        {
            "num": "3#",
            "diameter": "13.7",
            "perimeter": "42.9"
        },
        {
            "num": "4#",
            "diameter": "14.1",
            "perimeter": "44.2"
        },
        {
            "num": "5#",
            "diameter": "14.3",
            "perimeter": "44.8"
        },
        {
            "num": "6#",
            "diameter": "14.7",
            "perimeter": "46.1"
        },
        {
            "num": "7#",
            "diameter": "14.9",
            "perimeter": "46.8"
        },
        {
            "num": "8#",
            "diameter": "15.3",
            "perimeter": "48.0"
        },
        {
            "num": "9#",
            "diameter": "15.7",
            "perimeter": "49.3"
        },
        {
            "num": "10#",
            "diameter": "16.1",
            "perimeter": "50.6"
        },
        {
            "num": "11#",
            "diameter": "16.5",
            "perimeter": "51.9"
        },
        {
            "num": "12#",
            "diameter": "16.7",
            "perimeter": "52.5"
        },
        {
            "num": "13#",
            "diameter": "16.9",
            "perimeter": "53.1"
        },
        {
            "num": "14#",
            "diameter": "17.3",
            "perimeter": "54.4"
        },
        {
            "num": "15#",
            "diameter": "17.7",
            "perimeter": "55.7"
        },
        {
            "num": "16#",
            "diameter": "18.1",
            "perimeter": "57.0"
        },
        {
            "num": "17#",
            "diameter": "18.5",
            "perimeter": "58.3"
        },
        {
            "num": "18#",
            "diameter": "19.0",
            "perimeter": "59.5"
        },
        {
            "num": "19#",
            "diameter": "19.4",
            "perimeter": "60.8"
        },
        {
            "num": "20#",
            "diameter": "19.8",
            "perimeter": "62.1"
        },
        {
            "num": "21#",
            "diameter": "20.0",
            "perimeter": "62.7"
        },
        {
            "num": "22#",
            "diameter": "20.2",
            "perimeter": "63.4"
        },
        {
            "num": "23#",
            "diameter": "20.6",
            "perimeter": "64.6"
        },
        {
            "num": "24#",
            "diameter": "21.0",
            "perimeter": "65.9"
        },
        {
            "num": "25#",
            "diameter": "21.4",
            "perimeter": "67.2"
        },
        {
            "num": "26#",
            "diameter": "21.8",
            "perimeter": "68.5"
        },
        {
            "num": "27#",
            "diameter": "22.2",
            "perimeter": "69.7"
        }
    ];


    var bigDiv = document.createElement("div");
    bigDiv.setAttribute("class", "bigDiv");

    var leftDiv = document.createElement("div");

    bigDiv.appendChild(leftDiv);

    var t = document.createElement("table");
    t.setAttribute("border", "0");
    t.setAttribute("cellpadding", "0");
    t.setAttribute("cellspacing", "1");
    t.setAttribute("rules", "none");
    leftDiv.appendChild(t);
    var t_tr1 = document.createElement("tr");
    t.appendChild(t_tr1);
    var t_th1 = document.createElement("th");
    t_th1.innerHTML = "号数";
    t_tr1.appendChild(t_th1);

    var t_tr2 = document.createElement("tr");
    t.appendChild(t_tr2);
    var t_th2 = document.createElement("th");
    t_th2.innerHTML = "直径";
    t_tr2.appendChild(t_th2);

    var t_tr3 = document.createElement("tr");
    t.appendChild(t_tr3);
    var t_th3 = document.createElement("th");
    t_th3.innerHTML = "周长";
    t_tr3.appendChild(t_th3);


    var rightDiv = document.createElement("div");
    rightDiv.setAttribute("class", "tableDiv");
    bigDiv.appendChild(rightDiv);
    var t2 = document.createElement("table");
    t2.setAttribute("border", "0");
    t2.setAttribute("cellpadding", "0");
    t2.setAttribute("cellspacing", "1");
    t2.setAttribute("rules", "none");
    rightDiv.appendChild(t2);

    var t2_tr1 = document.createElement("tr");
    t2.appendChild(t2_tr1);

    var t2_tr2 = document.createElement("tr");
    t2.appendChild(t2_tr2);

    var t2_tr3 = document.createElement("tr");
    t2.appendChild(t2_tr3);

    for (var i = 0; i < data.length; i++) {
        var item = data[i];
        var t_td1 = document.createElement("td");
        t_td1.innerHTML = item.num;
        t2_tr1.appendChild(t_td1);

        var t_td2 = document.createElement("td");
        t_td2.innerHTML = item.diameter;
        t2_tr2.appendChild(t_td2);

        var t_td3 = document.createElement("td");
        t_td3.innerHTML = item.perimeter;
        t2_tr3.appendChild(t_td3);
    }

    document.body.appendChild(bigDiv)

</script>



</body>
</html>
